<template>
    <UxDialog :visible="product" class="dialog-branding" :title="inited && !empty ? 'Branding' : ''" @close="onClose">

        <!-- 初始化 -->
        <div class="dialog-branding-init" v-if="!inited">
            <UxLoading />
        </div>

        <!-- 为空 -->
        <div class="dialog-branding-nodata" v-else-if="empty">
            <h3>
                Want to increase brand awareness?
            </h3>
            <h5>Tap into your creativity and design one-of-a-kind branded packaging!</h5>
            <figure>
                <img src="https://img.podpartner.com/static/images-20230202/brand/binding-nodata.png" alt="">
            </figure>
            <fieldset>
                <button @click="$router.push('/branding/hangtag')">Create hang tag</button>
                <button @click="$router.push('/branding/package')">Create packaging bag</button>
            </fieldset>
        </div>

        <div class="dialog-branding-content" v-else v-loading="loading">
            <div class="dialog-branding-content-model">
                <CommonTemplatePreview :pieces.sync="product.design_list" :models="product.model_img" :colors="product.color_list" :baseColor="getColorPreview(product)" />

                <div class="dialog-branding-content-price">
                    <strong v-text="product.template_name || product.title"></strong>
                    <p v-for="(item,index) in productPrice" :key="index">
                        <span v-if="item.sub_title" v-text="item.sub_title"></span>
                        <CommonLevelDiscount :level="product" :price="item.price" :blank="item.is_blank" type="unit|discount|icon" />
                    </p>
                </div>

            </div>
            <BrandingChangeBranding :hangtag="product.tag_design_info" :packaging='product.pack_design_info' @change='onChangeClick($event)' @disconnect="onDisconnectClick($event)" />
        </div>

        <!-- 选择吊牌 -->
        <BrandingHangtagSelect v-if="hangtagSelect" v-model="hangtagSelect" @update="bindChange('tag', $event)" />
        <!-- 选择包装 -->
        <BrandingPackageSelect v-if="packagingSelect" v-model="packagingSelect" @update="bindChange('pack', $event)" />
        <!-- 绑定与解除绑定弹窗 -->
        <BrandingBindProductNotify :option="bindInfo.option" v-if="bindInfo" @close="bindInfo.close($event)" @success="bindInfo.success($event)" />

    </UxDialog>
</template>
<script>
export default {
    name: "BrandingBindProduct",
    props: {
        value: { type: Object, default: null },
        source: { type: String, default: "template" }
    },
    data () {
        return {
            inited: false,
            empty: false,
            loading: false,
            change: false,
            product: null,
            bindInfo: null,
            hangtagSelect: null,
            packagingSelect: null,
        }
    },

    computed: {
        productPrice () {

            const getPrice = (item) => {
                if (item.low_price == item.high_price) {
                    return item.low_price + item.extra_price
                } else {
                    return [item.low_price + item.extra_price, item.high_price + item.extra_price].join('-');
                }
            }

            if (!this.product) {
                // 没有产品
                return []
            } else if (this.product.data && this.product.data.length > 0) {
                // 套装
                return this.product.data.map(item => ({
                    sub_title: item.sub_title,
                    price: getPrice(item),
                    is_blank: item.is_blank
                }))
            } else {
                return [{
                    price: getPrice(this.product),
                    is_blank: this.product.is_blank
                }]
            }
        }
    },
    methods: {

        async getBrandHangtag (option) {
            const response = await this.$http("BrandHangtag.search", {});
            return response.data || [];
        },

        async getBrandPackage (option) {
            const response = await this.$http("BrandPackage.search", {});
            return response.data || [];
        },


        // 颜色预览
        getColorPreview (item) {
            const color = item.color_base;
            const list = item.color_list || [];
            const select = list.filter((i) => i.color_num == color || i.color_id == color);
            return select[0] || list[0];
        },

        getPriceFixed (price) {
            return (price * 0.01).toFixed(2)
        },

        // 更换绑定
        onChangeClick (type) {
            if (type == 'tag') {
                this.hangtagSelect = this.product.tag_design_info || {};
            } else if (type == 'pack') {
                this.packagingSelect = this.product.pack_design_info || {};
            }
        },

        // 绑定
        bindChange (type, brand) {

            this.loading = true;
            this.bindInfo = {
                option: {
                    product: this.product,
                    brand: brand,
                    source: this.source,
                    type: type,
                },
                success: (product) => {

                    if (type == 'tag') {
                        this.product.tag_design_info = brand;
                        this.product.tag_design_id = brand.id;
                    } else if (type == 'pack') {
                        this.product.pack_design_info = brand;
                        this.product.pack_design_id = brand.id;
                    }

                    this.loading = false;
                    this.change = true;
                    this.bindInfo = null;
                    this.$nextTick(() => {
                        this.hangtagSelect = null;
                        this.packagingSelect = null;
                    })
                },
                close: () => {
                    this.loading = false;
                    this.bindInfo = null;
                }
            }

        },

        // 取消绑定
        onDisconnectClick (type) {

            this.loading = true;
            this.bindInfo = {
                option: {
                    product: this.product,
                    brand: null,
                    source: this.source,
                    type: type,
                },
                success: (product) => {

                    if (type == 'tag') {
                        this.product.tag_design_info = null;
                        this.product.tag_design_id = 0;
                    } else if (type == 'pack') {
                        this.product.pack_design_info = null;
                        this.product.pack_design_id = 0;
                    }

                    this.loading = false;
                    this.change = true;
                    this.bindInfo = null;
                    this.$nextTick(() => {
                        this.hangtagSelect = null;
                        this.packagingSelect = null;
                    })
                },
                close: () => {
                    this.loading = false;
                    this.bindInfo = null;
                }
            }


        },

        // 关闭
        onClose () {
            this.change && this.$emit('update', this.product)
            this.$emit('input', null);
        }
    },
    created () {
        // const value = this.value || {};
        this.product = JSON.parse(JSON.stringify(this.value || {}));
        this.change = false;

        if (this.product.tag_design_info || this.product.pack_design_info) {
            this.inited = true;
            this.empty = false;
            this.loading = false;
        } else {
            // 先获取数据判断是否是没有草稿
            Promise.all([this.getBrandHangtag(), this.getBrandPackage()]).then(result => {
                const hangtag = result[0] || [];
                const packaging = result[1] || [];
                this.empty = (hangtag.length + packaging.length) == 0;
                this.inited = true;
                this.loading = false;
            }).catch(error => {
                this.empty = true;
                this.inited = true;
                this.loading = false;
            })
        }

    }
}
</script>
<style scoped lang="scss">
.dialog-branding::v-deep > .dialog-content {
    width: calc(100vw - 152px);
    max-width: 856px;

    & > h2 {
        font-weight: bold;
    }
    & > .dialog-body {
        display: flex;
        flex-direction: column;
    }
}

.dialog-branding-init {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: #fff;
}

.dialog-branding-nodata {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 45px 24px;

    h3 {
        font-size: 24px;
        font-weight: bold;
        color: #000000;
        line-height: 20px;
    }
    h5 {
        margin-top: 10px;
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        line-height: 20px;
    }

    figure {
        width: 100%;
        margin-top: 24px;
        padding-bottom: 39.6%;
        position: relative;
        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }
    fieldset {
        margin-top: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;

        button {
            width: 180px;
            height: 38px;
            font-size: 14px;

            & + button {
                margin-left: 226px;
            }
        }
    }
}

.dialog-branding-content {
    flex: 1;
    .dialog-branding-content-model {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px 16px;
        box-sizing: border-box;
        background: #f6f6f6;

        .template-preview {
            display: inline-block;
            text-align: center;
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 2px;
            overflow: hidden;

            &::v-deep .process-icon {
                display: none;
            }
        }
        .dialog-branding-content-price {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-left: 18px;
            strong {
                font-size: 14px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 16px;
                margin-bottom: 8px;
            }
            p,
            .level-discount {
                font-size: 12px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                line-height: 18px;
            }
            p {
                margin-top: 4px;
                color: #000;
                display: flex;
                & > span {
                    margin-right: 8px;
                }
            }
        }
    }

    .change-branding {
        margin: 24px 16px 24px;
    }
}

@media (max-width: 960px) {
    .dialog-branding::v-deep > .dialog-content {
        width: 100%;
        max-width: inherit;
    }
}
</style>
